<template>
  <div class="home">
      <h1>All destinations</h1>
      <section class="distinations">
      <div v-for="destination in destinations" :key="destination.slug" :class="destination.name">
        
        <router-link :to="destination.slug"><h2>{{ destination.name }}</h2></router-link>

        <figure>
          <router-link :to="destination.name">
            <img :src="require(`@/assets/${destination.image}`)" :alt="destination.name">
          </router-link>
        </figure>
      </div>
      </section>
  </div>
</template>

<script>

// @ is an alias to /src
import store from '@/store.js';


export default {
  name: "Home",
  components: {
       
  },
  data() {
    //const {destinations} = store
    return {
      destinations:store.destinations
    }
  }
};
</script>


<style scoped>
.distinations {
  display:flex;
  
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: flex-start;
  
}

img {
  max-width:200px;
}

</style>